<template>
	<view class="content">
		<view class="padding bg-white flex justify-between align-center header">
			<view class="" :style="{'padding-top':menuHeight+'px'}">
				<text class="text-bold text-xl">{{baseInfo.districtName || baseInfo.cityName}}</text>
				<text class="padding-left">{{weatherInfo.temperature}} ℃</text>
				<text class="padding-left-sm text-blue">{{weatherInfo.weather}}</text>
			</view>
			<view class="">

			</view>
			<!-- <van-icon name="comment-o" size="22" @click="handleToPage('message')" /> -->
		</view>
		<view class="padding">
			<view class="bg-white padding">
				<view class="flex align-center justify-between" @click="handleToPage('base')">
					<view class="flex align-center">
						<text class="text-bold text-xxl text-cut text-blue">{{baseInfo.name}}</text>
						<u-tag text="负责人" type="warning" plain plainFill size="mini" class="shrink-0 padding-lr-xs">
						</u-tag>
					</view>
					<van-icon name="arrow" class="shrink-0" size="20" />
				</view>
				<view class="">
					<view class="padding-tb-sm">
						<text>今日数据</text>
					</view>
					<view class="flex justify-around">
						<view class="">
							<view class="">
								<text class="text-xl text-bold">{{usageTotal.feedTotal}}</text>
								<text class="padding-left-xs">kg</text>
							</view>
							<view class="text-gray">饲料投喂</view>
						</view>
						<view class="">
							<view class="">
								<text class="text-xl text-bold">{{usageTotal.elecTotal}}</text>
								<text class="padding-left-xs">kw</text>
							</view>
							<view class="text-gray">用电</view>
						</view>
						<view class="">
							<view class="">
								<text class="text-xl text-bold">{{usageTotal.waterTotal}}</text>
								<text class="padding-left-xs">m³</text>
							</view>
							<view class="text-gray">用水</view>
						</view>
					</view>

				</view>
			</view>

			<view class="margin-top bg-white padding-sm">
				<view class="flex align-center" @click="handleToPage('pond')">
					<text class="shrink-0 text-bold text-xl">塘口数据</text>
					<view class="full-width overflow-hidden flex justify-between padding-lr-sm">
						<view class="" v-for="(item,index) in pondStatusStatistics" :key="index">
							<text class="text-gray">{{item.status}}：</text>
							<text class="text-bold text-lg">{{item.cnt || '0'}}</text>
						</view>
					</view>
					<van-icon name="arrow" class="shrink-0" />
				</view>
				<view class="">
					<view class="">

					</view>
				</view>
			</view>
			<view class=" padding bg-white margin-top">

				<view class="flex">
					<view class="shrink-0">
						<text class="text-bold text-xl bg-gray">设备\n数据</text>

					</view>
					<view class="full-width">
						<view class="flex justify-around full-width">
							<view class="shadow-warp padding-sm radius" @click="handleToPage('equipment','JCSB')">
								<!-- <image src="../static/logo.png" mode="" class="cu-avatar sm"></image> -->
								<text class="">水质检测</text>
							</view>
							<view class="shadow-warp padding-sm radius" @click="handleToPage('equipment','YZSB')">
								<!-- <image src="../static/logo.png" mode="" class="cu-avatar sm"></image> -->
								<text class="">养殖设备</text>
							</view>
							<view class="shadow-warp padding-sm radius" @click="handleToPage('equipment','JKSB')">
								<!-- <image src="../static/logo.png" mode="" class="cu-avatar sm"></image> -->
								<text class="">实时监控</text>
							</view>
						</view>

					</view>
				</view>
				<view class="flex justify-between padding-top-sm full-width align-center">
					<view class="" @click="handleToPage('equipment')">
						<text>全部</text>
						<text class="padding-left-sm">{{deviceTotal.total}}</text>
						<van-icon name="arrow" class="shrink-0" />
					</view>
					<view class="text-green">
						<text>在线：</text>
						<text class="text-bold">{{deviceTotal.online}}</text>
					</view>
					<view class="text-blue">
						<text>运行中：</text>
						<text class="text-bold">{{deviceTotal.run}}</text>
					</view>
					<view class="text-red">
						<text>离线：</text>
						<text class="text-bold">{{deviceTotal.offline}}</text>
					</view>
				</view>
			</view>

			<view class="margin-top">
				<view class="padding-bottom-sm text-gray text-lg">
					<text>快速记录</text>
				</view>
				<view class="flex justify-between">
					<view class="flex align-center justify-around bg-white padding-sm" style="width: 32%;"
						@click="handleToPage('production')">
						<image src="/static/images/work/1-1.png" mode="" class="cu-avatar radius bg-transparent">
						</image>
						<text class="text-bold text-purple">生产\n记录</text>
					</view>
					<view class="flex align-center justify-around bg-white padding-sm" style="width: 32%;"
						@click="handleToPage('feed-inventory')">
						<image src="/static/images/work/2-3.png" mode="" class="cu-avatar radius bg-transparent">
						</image>
						<text class="text-bold text-brown">饲料\n库存</text>
					</view>
					<view class="flex align-center justify-around bg-white padding-sm" style="width: 32%;"
						@click="handleToPage('sale')">
						<image src="/static/images/work/1-7.png" mode="" class="cu-avatar radius bg-transparent">
						</image>
						<text class="text-bold text-pink">销售\n记录</text>
					</view>
				</view>

			</view>
			<view class="bg-white margin-top">
				<view class="flex align-center justify-between padding border-bottom padding-bottom-sm"
					@click="handleToPage('message')">
					<view class="flex">
						<text class="text-bold text-cut text-orange">今日异常报警</text>
					</view>
					<van-icon name="arrow" class="shrink-0" size="20" />
				</view>
				<view class="">
					<uni-table ref="table" stripe emptyText="今日暂无异常数据" width="100%">
						<uni-tr>
						</uni-tr>
						<uni-tr v-for="(item, index) in inventoryList" :key="index">
							<uni-td align="center">{{ item.time }}</uni-td>
							<uni-td align="center">
								<view class="name">{{ item.pond }}</view>
							</uni-td>
							<uni-td align="center">{{ item.message }}</uni-td>
							<uni-td align="center">{{ item.value }}</uni-td>
							<uni-td align="center">
								<text>{{item.souce || '-'}}</text>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
			<view class="margin-top bg-white padding-sm">
				<view class="full-width">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		statisticsPondStatus,
		statisticsFeedstuffStock
	} from '@/api/mine/statistics/index'
	import {
		getProductionBaseDeviceTotal,
		getProductionBaseUsageTotal
	} from '@/api/mine/productio_base/index'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				weatherInfo: {},
				mapUrl: getApp().globalData.config.mapUrl,
				menuHeight: getApp().globalData.menuHeight,
				pondStatusStatistics: [],
				feedstuffStockStatisticsQuery: {
					productionBaseId: undefined
				},
				statisticsPondStatusQuery: {
					productionBaseId: undefined
				},
				inventoryList: [],

				chartData: {},
				deviceTotal:{
					total:0,
					online:0,
					offline:0,
					run:0,
					warn:0
				},
				usageTotal:{
					feedTotal:0,
					elecTotal:0,
					waterTotal:0
				},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					background: 'rgba(0,0,0,0.1)',
					legend: {
						show: true,
						position: "bottom",
						lineHeight: 25
					},
					title: {
						name: "饲料库存",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "860 kg",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 20,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},
		onReady() {

		},
		onShow() {
			this.statisticsPondStatusQuery.productionBaseId = this.$store.state.user.baseInfo.id
			this.getPondStatusStatistics()
			this.feedstuffStockStatisticsQuery.productionBaseId = this.$store.state.user.baseInfo.id
			this.getFeedstuffStockStatistics()
			this.getDeviceTotal()
			this.getUsage()
		},
		watch: {
			'$store.state.user.baseInfo': {
				immediate: true,
				deep: true,
				handler(val) {
					if (val) {
						this.getWeatherInfo()
					}
				}
			}
		},
		computed: {
			...mapState({
				baseInfo: state => state.user.baseInfo
			})
		},
		methods: {
			getUsage(){
				getProductionBaseUsageTotal({id:this.statisticsPondStatusQuery.productionBaseId}).then(res=>{
					this.usageTotal = res.data
				})
			},
			//查询基地设备汇总
			getDeviceTotal(){
				getProductionBaseDeviceTotal(this.statisticsPondStatusQuery.productionBaseId).then(res=>{
					this.deviceTotal = res.data
				})
			},
			getWeatherInfo() {
				const that = this
				uni.request({
					url: this.mapUrl + '/ws/weather/v1',
					method: 'get',
					data: {
						key: 'UGOBZ-JUILT-U7NXR-LE6XJ-GFUNT-PMFDP',
						adcode: padToSix(that.baseInfo.districtId) || padToSix(that.baseInfo.cityId),
					},
					success: (res) => {
						let {
							data: {
								result: {
									realtime
								}
							}
						} = res
						this.weatherInfo = realtime[0]['infos']
					}
				})

				function padToSix(str) {
					// 检查 str 是否有效，如果无效则返回原值
					if (!str || str == null || str === '') {
						return str;
					}

					// 如果有效且长度不足6，则补充0
					return str.length < 6 ? str.padEnd(6, '0') : str;
				}
			},
			formatNumber(num) {
				if (Number.isInteger(num)) {
					return num; // 如果是整数，直接返回
				} else {
					return num.toFixed(1); // 如果是小数，保留一位小数
				}
			},
			getFeedstuffStockStatistics() {
				statisticsFeedstuffStock(this.feedstuffStockStatisticsQuery).then(res => {
					let {
						data = []
					} = res
					let options = {
						series: [{
							data: []
						}]
					};

					let seriesData = data.map(item => {
						return {
							name: item.name,
							value: item.stock || 0
						}
					})
					options.series[0]['data'] = seriesData || []
					let total = seriesData.reduce((prev, cur) => {
						return prev + cur.value;
					}, 0)
					this.opts.subtitle.name = this.formatNumber(total) + ' kg'
					this.chartData = JSON.parse(JSON.stringify(options));
				})
			},
			getPondStatusStatistics() {
				statisticsPondStatus(this.statisticsPondStatusQuery).then(res => {
					this.pondStatusStatistics = res.data
				})
			},
			handleToPage(path, type) {
				switch (path) {
					case "base":
						this.$tab.navigateTo('/pages/mine/base/change')
						break;
					case "pond":
						this.$tab.navigateTo('/pages/mine/pond/index')
						break;
					case "message":
						this.$tab.navigateTo('/pages/index/message/index')
						break;
					case "production":
						this.$tab.navigateTo('/pages/work/production/index')
						break;
					case "feed-inventory":
						this.$tab.navigateTo('/pages/work/feed-inventory/index')
						break;
					case "sale":
						this.$tab.navigateTo('/pages/work/sale/index')
						break;
					case "equipment":
						this.$tab.navigateTo('/pages/mine/equipment/index?type=' + type)
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-table {
		min-width: 100% !important;
	}

	.header {
		position: sticky;
		top: 0;
		z-index: 99;
	}
</style>